﻿
@{
    ViewBag.Title = "列表";
    var F = Html.F();
}

@section head {
    <style>
        .f-grid-row .f-grid-cell-inner {
            white-space: normal;
            word-break: break-all;
            height: auto !important;
            max-height: 100px;
        }
    </style>
}

@section body {
    @(F.Panel().ID("Panel1").BodyPadding(3).ShowBorder(false).ShowHeader(false).Layout(LayoutType.Fit).AutoScroll(true).IsViewPort(true)
                .Toolbars(F.Toolbar().Position(ToolbarPosition.Top).Items(
                        F.Button().ID("Button_add").Icon(Icon.Add).Text("添加文字水印").OnClientClick("AddWindow(1)"),
                        F.ToolbarSeparator(),
                        F.Button().ID("Button_add").Icon(Icon.ImageAdd).Text("添加图片水印").OnClientClick("AddWindow(2)"),
                        F.ToolbarSeparator(),
                        F.Button().ID("Button_delete").Icon(Icon.Delete).Text("批量删除").OnClientClick("getGridSelectedRows()"),
                        F.ToolbarFill(),
                        F.Button().ID("Button_show").Icon(Icon.Image).Text("显示效果图").OnClick(Url.Action("ShowPic"), "Panel1"),
                        F.HiddenField().ID("f_wmid").Text(ViewBag.wmid.ToString())
                        ),
                        F.Toolbar().Position(ToolbarPosition.Top).Items(
                            F.Image().ID("f_img").ImageHeight(200).ImageUrl(ViewBag.img)
                        )
                    )
                    .Items(
                        F.Grid().Layout(LayoutType.Fit).AllowPaging(true).IsDatabasePaging(true).EnableCheckBoxSelect(true).CheckBoxSelectOnly(true).ShowHeader(false).ShowBorder(true)
                        .ID("Grid1").OnPageIndexChanged(Url.Action("Grid1_PageIndexChanged"), "Panel1").DataIDField("id").EnableTextSelection(true).EnableHeaderMenu(false)

                    .PageItems(
                        F.ToolbarSeparator(),
                        F.DropDownList().ID("ddlPageSize").Width(160).Label("每页记录数")
                            .Items(
                                F.ListItem().Text("10").Value("10"),
                                F.ListItem().Text("20").Value("20").Selected(true),
                                F.ListItem().Text("50").Value("50"),
                                F.ListItem().Text("100").Value("100")
                            ),
                        F.ToolbarSeparator()
                    )
                    .Columns(
                        //F.RowNumberField(),
                        F.RenderField().HeaderText("编辑").ColumnID("Actions").Width(50).RendererFunction("renderActions")
                        , F.RenderField().HeaderText("文字或图片路径").DataField("title").Width(200).RendererFunction("renderPicOrTxt")
                        , F.RenderCheckField().HeaderText("是否为图片").DataField("ispic").RenderAsStaticField(true).Width(100)
                        , F.RenderField().HeaderText("长(文字大小)").DataField("w").FieldType(FieldType.Int).TextAlign(TextAlign.Right).Width(100)
                        , F.RenderField().HeaderText("宽").DataField("h").FieldType(FieldType.Int).TextAlign(TextAlign.Right).Width(100)
                        , F.RenderField().HeaderText("x坐标").DataField("x").FieldType(FieldType.Float).TextAlign(TextAlign.Right).Width(100)
                        , F.RenderField().HeaderText("y坐标").DataField("y").FieldType(FieldType.Float).TextAlign(TextAlign.Right).Width(100)
                        , F.RenderField().HeaderText("透明度").DataField("Transparency").FieldType(FieldType.Int).TextAlign(TextAlign.Right).Width(80)

                    )
            ))
    @(F.Window().ID("Window1").Height(450).Width(650).IsModal(true).EnableMaximize(true).EnableIFrame(true).Hidden(true).Icon(Icon.ApplicationFormEdit).Target(Target.Top).EnableResize(true)
                .CloseAction(CloseAction.HidePostBack).OnClose(Url.Action("Grid1_PageIndexChanged"), "Panel1"))
}

@section script {
    <script>
        function onGridBind() {
            var grid1 = F.ui.Grid1;
            grid1.setPageIndex(0);
            // 触发后台事件
            F.doPostBack('@Url.Action("Grid1_PageIndexChanged")', "Panel1");
        }

        F.ready(function() { 
            onGridBind();
            F.ui.ddlPageSize.on('change', function () { onGridBind() });

            var grid = F.ui.Grid1;
            grid.el.on('click', '.f-grid-cell-Actions .action', function (event) {
                var targetEl = $(this);
                var rowEl = targetEl.closest('.f-grid-row');
                var rowData = grid.getRowData(rowEl);
                var rowId = rowData.id;

                var btn = $(this);
                if (btn.hasClass('editit')) {
                    openWindow(rowId); // 编辑窗体
                }
            });
        })

        function getGridSelectedRows() {
            F.confirm({
                message: "确定要执行选中行删除操作吗？",
                ok: function() {
                    var result ='', grid = F.ui.Grid1;
                    $.each(grid.getSelectedRows(true),
                        function(index, item) {
                            result +=','+item.id;// item.id对应绑定的.DataIDField("ID")的值;item.values.字段1 对应列DataField("字段1")
                        });
                    if (result.length == 0) {
                        NotifyQuestion("请选择要删除的选中行");
                        return;
                    }
                    F.doPostBack('@Url.Action("Button_delete_Click")', {ids: result});
                }
            })
        }

        function renderPicOrTxt(value, params) {
            //console.log(params.rowValue.ispic);
            if (params.rowValue.ispic)
                return '<img height="100px" src="' + value + '">';
            else
                return value;
        }


        function renderActions(value, params) {
            return '<a class="action editit" href="javascript:;">' +
                '<img class="f-grid-imagefield" src="' + F.baseUrl + 'res/icon/pencil.png">' +
                '</a>';
        }

        function openWindow(id) {
            F.ui.Window1.show('@Url.Action("Add","wmfile")'+"?id="+id, '编辑');
        }

        function AddWindow(id) {
            if (id===1) {
                F.ui.Window1.show('@Url.Action("Add","wmfile")?wmid='+@ViewBag.wmid, "添加文字水印");
            } else {
                F.ui.Window1.show('@Url.Action("AddPic","wmfile")?wmid='+@ViewBag.wmid, "添加图片水印");
            }
        }
    </script>
}
